<template>
	<div class="header">
		<div class="left">
			<el-button icon="el-icon-menu" @click="headerMenuClick()" type="info" size="mini" style="background-color: #409EFF;"></el-button>
			<!-- 面包屑 -->
			<span class="text">首页</span>
		</div>
		<div class="right">
			<el-dropdown>
				<span class="el-dropdown-link">
					<!-- 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> -->
					<img :src="imgPath" class="user-image" style="margin-right: 20px;" />
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item @click.native="ShowUserInfo">个人中心</el-dropdown-item>
					<el-dropdown-item @click.native="logout">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	import http from '../utils/request.js'
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1',
				imgPath: ''
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			async headerMenuClick() {
				this.$store.commit('collapseMenu');
			},
			ShowUserInfo() {
				this.$router.push('/userInfo');
			},
			async logout() {
				const resp = await http.post('/login/logout', {
					username: this.$store.state.user.username
				});
				this.$store.commit('RESET_ALL_STATE'); // 重置所有模块的 state
				localStorage.clear(); // 清除所有 localStorage
				this.$router.push('/login');
			}
		},
		computed: {},
		created() {
			this.imgPath = this.$store.state.user.img;
		}
	}
</script>

<style lang="less" scoped>
	.header {
		background-color: #66B2FF;
		height: 3.75rem;
		display: flex;
		justify-content: space-between; // CSS Flexbox 布局中的一个属性值，用于在主轴方向上分布子元素。第一个元素和最后元素紧贴边缘。\
		align-items: center;

		.el-button {
			margin: 1.25rem;
		}

		.text {
			color: #fff;
			font-size: 0.875rem;
		}

		.right {
			display: flex;
			align-items: center;
			/* 垂直居中 */
			height: 100%;

			/* 确保容器有高度 */
			.el-dropdown-link {
				align-items: center;
				/* 垂直居中 */
				justify-content: center;
				/* 水平居中（可选） */
			}

			.user-image {
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				margin-top: 0.3125rem;
			}
		}
	}

	.el-dropdown-link {
		cursor: pointer;
		width: 3.125rem;
		height: 3.125rem;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
</style>